<template>
  <div class="app-container">
    <div>
      <h3 style="font-weight: 700">
        房产管理 &nbsp;
        <span style="font-size: 16px; font-weight: 400"
          >用于展示房产列表信息，以户为单位</span
        >
      </h3>
    </div>
    <div>
      <el-card shadow="always">
        <el-form :inline="true" label-position="top" label-width="80px">
          <el-form-item label="小区名称">
            <el-select
              placeholder="请选择小区"
              v-model="queryData.community_code"
              @change="changeBuilding"
            >
              <el-option
                v-for="item in communityList"
                :key="id"
                :label="item.name"
                :value="item.code"
              >
                {{ item.name }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="栋数">
            <el-select
              placeholder="请选择栋数"
              v-model="queryData.building_code"
            >
              <el-option
                v-for="item in buildingList"
                :key="id"
                :label="item.name"
                :value="item.code"
              >
                {{ item.name }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单元数">
            <el-input
              v-model="queryData.unit"
              placeholder="请输入单元数"
            ></el-input>
          </el-form-item>
          <el-form-item label="楼层">
            <el-input
              v-model="queryData.floor"
              placeholder="请输入楼层"
            ></el-input>
          </el-form-item>
          <el-form-item label="房产名称">
            <el-input
              v-model="queryData.name"
              placeholder="请输入房产名称"
            ></el-input>
          </el-form-item>
          <el-form-item label>
            <el-button type="primary" @click="onSearch">搜索</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
          <el-collapse>
            <el-collapse-item title="展开">
              <el-form-item label="户主姓名">
                <el-input
                  v-model="queryData.owner_name"
                  placeholder="请输入户主姓名"
                ></el-input>
              </el-form-item>
              <el-form-item label="联系方式">
                <el-input
                  v-model="queryData.owner_tel"
                  placeholder="请输入联系方式"
                ></el-input>
              </el-form-item>
              <el-form-item label="入住时间">
                <el-date-picker
                  type="daterange"
                  v-model="time"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  clearable
                  @change="timeChange"
                />
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </el-form>
      </el-card>
      <br />
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-row :gutter="20" type="flex" justify="end">
          <div>
            <el-button type="primary" @click="formRef.isShow = true"
              >新增</el-button
            >
          </div>
        </el-row>
        <br />
        <el-table :data="list">
          <el-table-column label="小区名称">
            <template #default="{ row }">
              {{ row.community.name }}
            </template>
          </el-table-column>
          <el-table-column label="栋数">
            <template #default="{ row }">
              <!-- {{ row.building }} -->
            </template>
          </el-table-column>
          <el-table-column label="单元数" prop="unit"> </el-table-column>
          <el-table-column label="楼层" prop="floor"> </el-table-column>
          <el-table-column label="房产编号" prop="code"> </el-table-column>
          <el-table-column label="房产名称" prop="name"> </el-table-column>
          <el-table-column label="户主姓名" prop="owner_name">
          </el-table-column>
          <el-table-column label="联系方式" prop="owner_tel"> </el-table-column>
          <el-table-column label="房间数" prop="rooms"> </el-table-column>
          <el-table-column label="描述" prop="desc"> </el-table-column>
          <el-table-column label="入住时间" prop="enter_time">
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="formRef.replayInfo(row.id)"
                >编辑</el-button
              >
              <el-popconfirm title="确定要删除吗" @confirm="delRow(row.id)">
                <template #reference>
                  <el-button type="text">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <br />
        <el-row :gutter="20" type="flex" justify="end">
          <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            v-model:current-page="queryData.current"
            :page-sizes="[3, 6, 8, 10]"
            v-model:page-size="queryData.pageSize"
            layout=" sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-row>
        <houseDraweer ref="formRef" @updateList="initData" />
      </el-card>
    </div>
  </div>
</template>

<script setup>
// import Table from '@/components/Table/table.vue'
import houseDraweer from "./houseDraweer.vue";
import { onMounted, reactive, ref, toRaw } from "vue";
import { getHouseList, delHouseList } from "@/api/house.js";
import { getCommunityList, getBuildingList } from "@/api/community_yuan.js";
import { formatDate } from "@/utils/index.js";
import { ElMessage } from "element-plus";

/**
 * ********************************************************************
 */
// 定义变量
const list = ref([]);
const total = ref(0);
const communityList = ref([]);
const buildingList = ref([]);
const time = ref();
const formRef = ref();
// 搜索查询表单数据
const queryData = reactive({
  current: 1,
  pageSize: 3,
  enter_time: "",
  community_code: "",
  name: "",
  floor: "",
  unit: "",
  owner_name: "",
  owner_tel: "",
  building_code: "",
});

onMounted(() => {
  initData();
});
// 初始化数据
const initData = async () => {
  let {
    data: { rows, count },
  } = await getHouseList(toRaw(queryData));
  rows = rows.map((item) => {
    item.enter_time = formatDate(item.enter_time);
    return item;
  });
  // 赋值变量
  list.value = rows;
  total.value = count;
  // 获取小区信息
  let { data } = await getCommunityList();
  communityList.value = data;
};

// 获取楼栋信息
const changeBuilding = async () => {
  let { data } = await getBuildingList(queryData.community_code);
  buildingList.value = data;
};
// 获取时间数据转换字符串
const timeChange = (val) => {
  console.log(toRaw(val));
  val = val.map((item) => (item = +new Date(item))).join(",");
  queryData.enter_time = val;
};

// 每页数量切换
const sizeChange = (val) => {
  queryData.pageSize = val;
  initData();
};
// 页码切换
const currentChange = (val) => {
  queryData.current = val;
  initData();
};

// 搜索查询
const onSearch = () => {
  queryData.current = 1;
  initData();
};

// 重置
const onReset = () => {
  Object.assign(queryData, {
    current: 1,
    pageSize: 3,
    enter_time: "",
    community_code: "",
    name: "",
    floor: "",
    unit: "",
    owner_name: "",
    owner_tel: "",
    building_code: "",
  });
  time.value = "";
  initData();
};

const delRow = async (id) => {
  await delHouseList(id);
  ElMessage.success("删除成功");
  if (queryData.current > 1 && list.value.length === 1) queryData.current--;
  initData();
};
</script>

<style scoped>
::v-deep .el-collapse-item__header {
  display: flex;
  align-items: center;
  padding-top: 20px;
  /* justify-content: space-around; */
  /* height: var(--el-collapse-header-height); */
  line-height: var(--el-collapse-header-height);
  background-color: var(--el-collapse-header-bg-color);
  color: var(--el-collapse-header-text-color);
  cursor: pointer;
  /* border-bottom: 1px solid var(--el-collapse-border-color); */
  /* border-top: none; */
  /* font-size: var(--el-collapse-header-font-size); */
  /* font-weight: 500; */
  transition: border-bottom-color var(--el-transition-duration);
  outline: 0;
  border: none;
}

.el-form--inline .el-form-item {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 12px;
}

::v-deep .el-collapse-item__wrap {
  will-change: height;
  background-color: var(--el-collapse-content-bg-color);
  overflow: hidden;
  box-sizing: border-box;
  border-bottom: none;
}

::v-deep .el-collapse-item__content {
  padding-bottom: 0px;
  font-size: var(--el-collapse-content-font-size);
  color: var(--el-collapse-content-text-color);
  line-height: 1.7692307692;
}
</style>
